import React, { useContext } from 'react';
import {View, ScrollView, ImageBackground, TouchableOpacity, Dimensions} from 'react-native';
import { colors, Divider, Image, registerCustomIconType, Text } from 'react-native-elements';

import LocaleContext from '../libs/locale';
import WalletContext from '../libs/wallet';
import { formartMoney, timeFormat } from '../libs/helpers';
import txIcon from '../assets/Assets/txDetails.png';
import Clipboard from '@react-native-community/clipboard';
import Toast from 'react-native-simple-toast';
import { contactURL } from '../libs/nodes';

const {width,height,scale} = Dimensions.get("window");
// console.log("屏幕="+width+" "+height+" "+scale);

const TxDetails = ({ navigation, route }: any) => {
  const locale: any = useContext(LocaleContext);
  const wallet: any = useContext(WalletContext);
  const tx = route.params.tx;
  const coin = route?.params?.coin||"";
  const onCopy = ( data:any) => {
    if(data=="")
      return;
    Clipboard.setString(data);
    Toast.show(locale?._('copied'));
  };

  const retrievedMoney = (remarks:any)=>{
    try{
      const res = remarks.split("：");
      return res[1];
    }catch (e) {
      return "0";
    }

  }

  return (
    <ScrollView>
      <View style={{
        alignItems: 'center',
        paddingTop: 10,
        paddingBottom: 0,
        backgroundColor: '#FAFBFDFF'
      }}>
        <ImageBackground source={txIcon} style={{ width: 80, height: 50 , backgroundColor:"white" }} />
        {
          // console.log("tx="+JSON.stringify(tx))
        }
        <Text style={{
          marginTop: 10,
          fontWeight: 'bold',
          fontSize: 21
        }}>
          {(coin == "SAT" || coin=="") ? (
                tx.addressIn !== wallet.address
                    ?
                   "+"+formartMoney(tx.amount, 4)
                    :
                    (tx.data.indexOf("addLiquidity")!==-1?
                            "-"+formartMoney(tx.data.match(/\"(.*?)\"/)[1],4)+' SAT'
                            :
                            (
                                tx.data.indexOf("retrieved")!==-1?
                                   '+'+formartMoney(retrievedMoney(tx.remarks),4)+' SAT'
                                    :
                                    '-'+formartMoney(tx.amount, 4)+' SAT'

                            )
                    )
            ) :
            (
                tx.data.indexOf("transfer") > -1 ?
                    (tx.addressIn === wallet.address
                            ?
                            '-'+formartMoney(tx.temp, 4)+' '+coin
                            :
                            '+'+formartMoney(tx.temp, 4)+' '+coin
                    )
                    : (
                        '0'
                    )
            )} </Text>
      </View>
      <View style={{ padding: 24,paddingTop:10 }}>
        <Text style={{ color: '#8E8E8EFF' }}>{locale._('Assets.tx.receiver')}</Text>
        <TouchableOpacity onPress={()=>onCopy(tx.type==="transfer" ||(tx.type.indexOf('Reward')!==-1)||((tx.type=="contract" && (tx.addressOut=="" || (tx.data.indexOf("transfer")==-1))))? tx.addressOut:((tx.data==="" || tx.data.length<43)?"":tx.data.substring(10,43)))}>
        <Text style={{ color: '#734FDFFF', paddingTop: 10, paddingBottom: 10 }}>{tx.type==="transfer" ||(tx.type.indexOf('Reward')!==-1)||((tx.type=="contract" && (tx.addressOut=="" || (tx.data.indexOf("transfer")==-1))))? tx.addressOut:((tx.data==="" || tx.data.length<43)?"":tx.data.substring(10,43))}</Text>
        </TouchableOpacity>
        <Text style={{ color: '#8E8E8EFF' }}>{locale._('Assets.tx.sender')}</Text>
        <TouchableOpacity onPress={()=>onCopy(tx.addressIn)}>
        <Text style={{ color: '#734FDFFF', paddingTop: 10, paddingBottom: 10 }}>{tx.addressIn}</Text>
        </TouchableOpacity>
        <Text style={{ color: '#8E8E8EFF' }}>{locale._('Assets.tx.gas')}</Text>
        <TouchableOpacity onPress={()=>onCopy("0.002")}>
        <Text style={{ paddingTop: 10 }}>{0.002}</Text>
        </TouchableOpacity>
      </View>
      <Divider style={{marginTop:-10,marginLeft:23,marginRight:23}}/>
      <View style={{ padding: 24,paddingTop:10}}>
        <View style={{ flexDirection: 'row' }}>
          <View>
            <Text style={{ color: '#8E8E8EFF' }}>{locale._('Assets.tx.timestamp')}</Text>
            <TouchableOpacity onPress={()=>onCopy(tx.timestamp.toString())}>
            <Text style={{ paddingTop: 10, paddingBottom: 10 }}>{timeFormat(tx.timestamp)}</Text>
            </TouchableOpacity>
          </View>
          <View style={{marginLeft:50}}>
            <Text style={{ color: '#8E8E8EFF' }}>{locale._('Assets.tx.blockNumber')}</Text>
            <TouchableOpacity onPress={()=>onCopy(tx.height.toString())}>
            <Text style={{ paddingTop: 10, paddingBottom: 6 }}>{tx.height}</Text>
            </TouchableOpacity>
          </View>
        </View>
        <Text style={{ color: '#8E8E8EFF' }}>{locale._('Assets.tx.hash')}</Text>
        <TouchableOpacity onPress={()=>onCopy(tx.hash.toString())}>
        <Text style={{ color: '#734FDFFF', paddingTop: 6,paddingBottom:10 }}>{tx.hash}</Text>
        </TouchableOpacity>
        <Text style={{ color: '#8E8E8EFF' }}>{locale._('Assets.tx.data')}</Text>
        <TouchableOpacity onPress={()=>onCopy(tx.type==="transfer" ||(tx.type.indexOf('Reward')!==-1) ||((tx.type=="contract" && (tx.addressOut=="" || (tx.data.indexOf("transfer")==-1))))?tx.data:"tokenAddress:"+tx.addressOut)}>
        <Text style={{ color: '#734FDFFF', paddingTop: 6 ,paddingBottom:10}}>{tx.type==="transfer"||(tx.type.indexOf('Reward')!==-1) ||((tx.type=="contract" && (tx.addressOut=="" || (tx.data.indexOf("transfer")==-1))))?tx.data:"tokenAddress:"+tx.addressOut}</Text>
        </TouchableOpacity>
        <Text style={{ color: '#8E8E8EFF' }}>{locale._('Assets.tx.remarks')}</Text>
        <TouchableOpacity onPress={()=>onCopy(tx.remarks.toString())}>
        <Text style={{ color: '#734FDFFF', paddingTop: 6 ,paddingBottom:10}}>{tx.remarks}</Text>
        </TouchableOpacity>
        <Text style={{color:"#8E8E8EFF"}}>{locale._('Assets.tx.Blockbrowser')}</Text>
        {/* onPress={()=>contactURL("https://testnet.smartx.one/browser/TransactionDetails?hash="+tx.hash)} style={{}} */}
        <TouchableOpacity onPress={()=>navigation.navigate('WebBrowserInfo',{url:("https://explore.smartx.one/TransactionDetails?hash="+tx.hash),showExplore:true})}>
          <Text  style={{color:'#734FDFFF', paddingTop: 6 ,paddingBottom:10,}}>https://explore.smartx.one/{'\n'}TransactionDetails?hash={tx.hash}</Text>
        </TouchableOpacity>
      </View>
    </ScrollView>
  );
};

export default TxDetails;
